define(["jquery", "easy-admin", "vue", "treetable",], function ($, ea, Vue) {

    var form      = layui.form,
        treetable = layui.treetable,
        table     = layui.table;
    return {
        index() {
            let app = new Vue({
                el     : '#app',
                data   : {
                    editConfigTabId: 0,
                    configTabId    : 0
                },
                methods: {
                    addTab() {
                        ea.open('添加分类 ID:' + this.configTabId, ea.url('system.config.SystemConfigTab/create'), '635px', '470px');
                    },
                    editTab() {
                        let id = (this.editConfigTabId || this.configTabId);
                        ea.open('编辑分类ID:' + id, ea.url('system.config.SystemConfigTab/edit?id=' + id), '635px', '490px');
                    },
                    addConfig() {
                        let id = (this.editConfigTabId || this.configTabId);
                        ea.open('添加配置', ea.url('system.config.SystemConfig/create?tab_id=' + id), '40%', '80%', '');
                    },
                    deleteTab() {
                        ea.msg.confirm('确定删除选中的分类吗？', () => {
                            ea.request.post({
                                url : ea.url('system.config.SystemConfigTab/delete'),
                                data: {
                                    id: this.configTabId
                                }
                            }, function (res) {
                                if (res.code === 0) {
                                    return ea.msg.error(res.msg);
                                }
                                renderLeftTable();
                            });
                        });
                    }
                }
            });
            var renderLeftTable = function () {
                layer.load();
                treetable.render({
                    treeColIndex    : 1,
                    treeSpid        : 0,
                    treeIdName      : 'id',
                    treePidName     : 'pid',
                    url             : ea.url('setting.systemConfig/basicHeader'),
                    elem            : '#classify-table',
                    id              : 'classify-table',
                    where           : {is_children: 0, status: -1},
                    treeDefaultClose: true,
                    cols            : [
                        [
                            {type: 'numbers'},
                            {field: 'label', title: '分组名称', align: 'left'},
                        ]
                    ],
                    done            : function (res, curr, count) {
                        layer.closeAll('loading');

                        app.configTabId = res.data.find((item) => {
                            return item.pid !== 0
                        }).id;

                        $('.treeTable .treeTable-icon:eq(0)').click();
                        $('.treeTable table tr:eq(2)').addClass('layui-table-row-click');
                        renderConfigTable();
                    }
                });
            };
            renderLeftTable();

            let renderConfigTable = function () {
                ea.table.render({
                    init      : {
                        index_url      : 'system.config.SystemConfig/index',
                        delete_url     : 'system.config.SystemConfig/delete',
                        table_elem     : '#currentTable',
                        table_render_id: 'currentTableRenderId',
                    },
                    where     : {tab_id: app.configTabId},
                    cols      : [
                        [
                            {field: 'info', title: '配置名称'},
                            {field: 'menu_name', minWidth: 80, title: '配置英文名称'},
                            {field: 'value', title: '配置值'},
                            {field: 'type', title: '配置类型', templet: '#type-btn'},
                            {
                                field     : 'status', title: '状态', width: 85, search: 'select', selectList: [
                                    '禁用', '启用'
                                ], templet: ea.table.switch
                            },
                            {field: 'sort', title: '排序', edit: 'text'},
                            {field: 'create_time', minWidth: 80, title: '创建时间', search: 'range'},
                            {
                                fixed  : 'right',
                                width  : 250,
                                title  : '操作',
                                templet: ea.table.tool,
                                operat : [
                                    [
                                        {
                                            text  : '编辑',
                                            extend: 'data-width="40%" data-height="80%"',
                                            url   : 'system.config.SystemConfig/edit'
                                        }
                                    ],
                                    'delete'
                                ]
                            }
                        ]
                    ],
                    search    : false,
                    toolbar   : ['refresh'],
                    tabToolbar: []
                });
            }

            window.renderLeftTable = renderLeftTable;
            table.on('row(classify-table)', function (obj) {
                let data = obj.data;
                //标注选中样式
                obj.tr.addClass('layui-table-row-click').siblings().removeClass('layui-table-row-click');

                if (data.isParent) {
                    app.editConfigTabId = data.id;
                    return;
                }
                app.editConfigTabId = 0;

                if (app.configTabId === data.id) {
                    return;
                }
                app.configTabId = data.id;
                //标注选中样式
                obj.tr.addClass('layui-table-row-click').siblings().removeClass('layui-table-row-click');
                renderConfigTable();
            });

            ea.listen();
        },
        create() {
            let app = this.configPage();
            ea.listen();
        },
        edit() {
            let app = this.configPage();
            ea.listen();
        },
        configPage() {
            let app = new Vue({
                el     : '#app-form',
                data   : {
                    row          : row || {},
                    type         : '',
                    date_type    : 'datetime',
                    upload_type  : '',
                    inputTypeList: [
                        {label: '单行文本', value: 'text'},
                        {label: '多行文本', value: 'textarea'},
                        {label: '数字', value: 'number'},
                        {label: '单选框', value: 'radio'},
                        {label: '复选框', value: 'checkbox'},
                        {label: '日期时间', value: 'date'},
                        {label: '图片上传', value: 'frame'},
                        {label: '文件上传', value: 'upload'},
                    ],
                    validateRule : [
                        {name: '必填', value: 'required'},
                        {name: '必填', value: 'required'},
                        {name: '必填', value: 'required'},
                        {name: '必填', value: 'required'},
                        {name: '必填', value: 'required'},
                    ]
                },
                methods: {},
                mounted() {
                    this.type = this.row.type || '';
                    this.date_type = this.row.date_type || '';
                    this.$nextTick(() => {
                        form.render();
                    })
                }
            });

            form.on('select(input_type)', function (data) {
                app.type = data.value; //得到被选中的值
                app.$nextTick(() => {
                    form.render('radio');
                })
            });

            form.on('radio(date_type)', function (data) {
                app.date_type = data.value; //被点击的radio的value值
            });

            return app;
        }
    };
});